import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { useState } from 'react';
import { useRouter } from 'expo-router';

const dates = [
  { label: 'MON', day: '22' },
  { label: 'TUE', day: '23' },
  { label: 'WA', day: '24' },
  { label: 'THR', day: '25' },
  { label: 'MAY', day: '24' },
  { label: 'FF', day: '27' },
  { label: 'SO', day: '28' },
];

const times = [
  { time: '9:00 AM', available: true },
  { time: '10:00 AM', available: true },
  { time: '1:00 PM', available: true },
  { time: 'Unavailable', available: false },
];

export default function BookingSelectionScreen() {
  const router = useRouter();
  const [selectedDate, setSelectedDate] = useState('24');
  const [selectedTime, setSelectedTime] = useState(null);

  return (
    <ScrollView style={styles.container}>
      <View style={styles.headerBar}>
        <TouchableOpacity onPress={() => router.back()}>
          <Text style={styles.backText}>←</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>預約詳情</Text>
        <View style={{ width: 24 }} />
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.title}>Video Editing Consultation</Text>
        <Text style={styles.subtitle}>$100 ・ 60 min ・ For Premium Members</Text>
        <Text style={styles.desc}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut wsi enim mad minim venia. Quisque dursie ni arcu. Ut nunc pervaed lorem ipsum dolor sit amet, consectetur sadipi.
        </Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Select a Date</Text>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.dateRow}>
          {dates.map((d, index) => (
            <TouchableOpacity
              key={index}
              style={[styles.dateItem, selectedDate === d.day && styles.dateSelected]}
              onPress={() => setSelectedDate(d.day)}
            >
              <Text style={styles.dateLabel}>{d.label}</Text>
              <Text style={styles.dateDay}>{d.day}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Select a Time</Text>
        <View style={styles.timeGrid}>
          {times.map((t, index) => (
            <TouchableOpacity
              key={index}
              disabled={!t.available}
              style={[styles.timeBtn, !t.available && styles.timeUnavailable, selectedTime === t.time && styles.timeSelected]}
              onPress={() => setSelectedTime(t.time)}
            >
              <Text style={[styles.timeText, !t.available && styles.unavailableText]}>{t.time}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      <TouchableOpacity style={styles.nextBtn}>
        <Text style={styles.nextText}>Next</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  headerBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 60,
    paddingHorizontal: 20,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  backText: {
    fontSize: 20,
    color: '#333',
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
  },
  infoBox: {
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    color: '#111',
    marginBottom: 6,
  },
  subtitle: {
    fontSize: 14,
    color: '#888',
    marginBottom: 12,
  },
  desc: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
  },
  section: {
    paddingHorizontal: 20,
    marginTop: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
    marginBottom: 12,
  },
  dateRow: {
    flexDirection: 'row',
  },
  dateItem: {
    backgroundColor: '#f4f4f4',
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
    alignItems: 'center',
    marginRight: 12,
  },
  dateSelected: {
    backgroundColor: '#ccc',
  },
  dateLabel: {
    fontSize: 12,
    color: '#999',
  },
  dateDay: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
  },
  timeGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  timeBtn: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
  },
  timeSelected: {
    backgroundColor: '#111',
  },
  timeText: {
    fontSize: 14,
    color: '#111',
  },
  timeUnavailable: {
    backgroundColor: '#eee',
    borderColor: '#eee',
  },
  unavailableText: {
    color: '#aaa',
  },
  nextBtn: {
    backgroundColor: '#333',
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
    margin: 20,
  },
  nextText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
});
